<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会员登录</title>
		<script src="layui/layui.js" type="text/javascript"></script>
		<link href="layui/css/layui.css" type="text/css" rel="stylesheet"/>
		<style type="text/css">
			.layui-container .form{
				width: 50%;
				height: 200px;
				margin: 0 auto;
				margin-top: 200px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="layui-container">
		  <form class="layui-form form">
			  <h2 style="text-align: center;line-height: 60px;font-weight: 600;">商务会员管理系统</h2>
		    <div class="layui-form-item">
		      <label class="layui-form-label">用户名:</label>
		      <div class="layui-input-block">
		        <input type="text" width="80%" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-form-item">
		      <label class="layui-form-label">密码:</label>
		      <div class="layui-input-inline">
		        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-form-item" style="text-align: center;">
		        <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
		    </div>
		  </form>
		</div>
		<script>
			//Demo
			layui.use('form', function(){
			  var form = layui.form,
				$=layui.$;
			  
			  //监听提交
			  form.on('submit(formDemo)', function(data){
				let databody = JSON.stringify(data.field);
				$.ajax({
					url : 'http://localhost:8080/auth/login',
					type : 'post',
					data : databody,
					xhrFields: {
						withCredentials: true //允许跨域带Cookie
					},
					async : true,
					headers : {
					    "content-Type":"application/json;charset=UTF-8"
					},
					dataType : 'json',
					success : (resp) => {
						// 登陆成功
						if(resp.code === 200){
							layer.msg(resp.msg);
							localStorage.setItem('loginUser',JSON.stringify(resp.data));
							window.location.href = 'index.html';
						}else{
							layer.msg(resp.msg);
						}
					}
				})
				return false;
			  });
			});
		</script>
	</body>
</html>
